<template>
    <view class="add-comment-item">
        <view class="star-box">
            <view class="product-item flex-s-fs">
                <image class="product-img" :src="easyGetImgUrl(data.ProductImage)"></image>
                <view class="product-content">
                    <view class="product-name text-show-line-1">
                        {{ data.Name }}
                    </view>
                    <view class="product-attr text-show-line-1" v-if="data.Attribute">
                        {{ data.Attribute }}
                    </view>
                </view>
            </view>
            <view class="star-item">
                <view class="star">
                    <view class="rate-model">
                        <uni-icons
                            v-for="(n, index) in 5"
                            :key="index"
                            size="56"
                            class="rate-item"
                            :color="param.star > index ? '#DBA868' : '#EBEBEF'"
                            type="star-filled"
                            @click="rateFn(index + 1)">
                        </uni-icons>
                    </view>
                </view>
                <view class="star-name">{{ starName }}</view>
            </view>
        </view>
        <view class="evaluate-box">
            <view class="title">我的评价：</view>
            <view class="textarea-box">
                <textarea class="textarea" :maxlength="maxlength" :placeholder="placeholder" @input="input"></textarea>
                <view class="textarea-toast">
                    <text class="currentLength">{{ currentLength }}</text>
                    <text class="maxlength">/{{ maxlength }}</text>
                </view>
            </view>
            <upload-img
                :imageList="imageList"
                @chooseImage="chooseImage"
                :totalCount="totalCount"
                :count="count"
                @del="del"></upload-img>
        </view>
    </view>
</template>

<script>
import uploadImg from "@/uni-sub-base/components/common/upload-img.vue"
import { getStarName } from "@/uni-sub-base/utils/utils.js"
export default {
    components: {
        uploadImg,
    },
    props: {
        data: {
            type: Object,
            default: () => {},
        },
        placeholder: {
            type: String,
            default: "请输入评论内容",
        },
        starRequired: {
            type: Boolean,
            default: true,
        },
        msgRequired: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            param: {
                star: 0,
                msg: "",
                images: "",
            },

            // 评星
            starName: "",
            maxlength: 300,
            currentLength: 0,

            // 图片
            imageList: [],
            count: 5,
            totalCount: 5,
        }
    },
    methods: {
        //选择图片
        chooseImage(imglist) {
            this.imageList = imglist
            this.count = this.totalCount - this.imageList.length

            this.upDateImg()
        },
        //删除图片
        del(imglist) {
            this.imageList = imglist
            this.count = this.totalCount - this.imageList.length

            this.upDateImg()
        },
        upDateImg() {
            this.param.images = ""
            if (this.imageList && this.imageList.length > 0) {
                this.param.images = this.imageList.join(",")
            }
        },
        input(e) {
            this.currentLength = e.detail.cursor
            this.param.msg = e.detail.value
        },
        rateFn(value) {
            this.param.star = value
            this.starName = getStarName(value)
        },
        getParam() {
            this.param.OrderDetailId = this.data.OrderDetailId ? this.data.OrderDetailId : this.data.ID
            this.param.ProductId = this.data.ProductId
            return this.param
        },
    },
}
</script>

<style lang="scss" scope>
.item-img {
    width: 700rpx;
    min-height: 300rpx;
    max-height: 700rpx;
    padding: 0;
}

.stickyTab {
    position: sticky;
    top: 44px;
    top: calc(44px + constant(safe-area-inset-top));
    top: calc(44px + env(safe-area-inset-top));
}

.btn-primary-full {
    margin-top: 72rpx;
}

.rate-model {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;

    .rate-item {
        display: flex;
        margin-right: 24rpx;
    }
}

// 评分框
.star-box {
    border-radius: 8rpx;
    background: $color-white;
    margin-bottom: 16rpx;

    .product-item {
        padding: $app-page-padding;
        display: flex;
        flex-direction: row;

        .product-img {
            width: 88rpx;
            height: 88rpx;
            border-radius: 8rpx;
        }

        .product-content {
            flex: 1;
            margin-left: 24rpx;

            .product-name {
                font-size: $font-size-30;
                font-weight: 600;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
            }

            .product-attr {
                font-size: $font-size-24;
                color: $color-gray-3;
            }
        }
    }

    .star-item {
        border-top: 2rpx solid $uni-border-color;
        text-align: center;

        .star {
            padding: 32rpx 0;
            display: flex;
            justify-content: center;
        }

        .star-name {
            font-size: $font-size-28;
            padding-bottom: 32rpx;
            color: #dba868;
        }
    }
}

// 评价框
.evaluate-box {
    border-radius: 8rpx;
    background: $color-white;
    margin-bottom: 16rpx;
    padding: $app-page-padding;
    padding-bottom: 10rpx;

    .title {
        padding-bottom: $app-page-padding;
    }

    .textarea-box {
        position: relative;
        margin-bottom: 24rpx;

        .textarea {
            margin: 0;
            background: #f6f7f7;
            width: 100%;
            font-size: $font-size-28;
            border-radius: 8rpx;
            box-sizing: border-box;
            padding: 16rpx 24rpx 60rpx;
            word-break: keep-all;
        }

        .textarea-toast {
            position: absolute;
            bottom: 18rpx;
            right: 24rpx;

            .currentLength {
                font-size: $font-size-24;
            }

            .maxlength {
                font-size: $font-size-20;
                color: $color-gray-C;
            }
        }
    }
}
</style>
